{block name="content"}
<div class="iframe-pagination notfooter">
    <fieldset>
        <legend>条件搜索</legend>
        <form action="{:sysuri()}" id="ProblemDataSearch" autocomplete="off" class="layui-form layui-form-pane form-search" method="get" onsubmit="return false">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">问题标题</label>
                <label class="layui-input-inline">
                    <input class="layui-input" name="name" placeholder="请输入问题标题" value="{$get.name|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">问题答案</label>
                <label class="layui-input-inline">
                    <input class="layui-input" name="content" placeholder="请输入问题答案" value="{$get.content|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">创建时间</label>
                <label class="layui-input-inline">
                    <input class="layui-input" data-date-range name="create_time" placeholder="请选择创建时间" value="{$get.create_time|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
            </div>
        </form>
    </fieldset>
    <table id="ProblemData" data-url="{:sysuri()}" data-target-search="#ProblemDataSearch"></table>
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        // 初始化表格组件
        $('#ProblemData').layTable({
            even: true, height: 'full',
            sort: {field: 'sort desc,id', type: 'desc'},
            cols: [[
                {field: 'id', title: 'ID', width: 60, align: 'center', sort: true},
                {field: 'name', title: '问题标题', align: 'left', minWidth: 100},
                {field: 'content', title: '问题答案', align: 'left', minWidth: 140, templet: '<div>{{d.content||"-"}}</div>'},
                {field: 'num_read', title: '阅读数', align: 'center', width: 90, sort: true, style: 'color:blue;font-size:16px'},
                {field: 'status', title: '状态', align: 'center', width: 80, templet: '#StatusSwitchProblemDataTpl'},
                {field: 'create_time', title: '创建时间', align: 'center', width: 170, sort: true},
                {toolbar: '#SelectToolbar', title: '操作', align: 'center', width: 100}
            ]]
        }).trigger('tool', function (item) {
            window.setItemValue(item.data.id, item.data.name);
            item.tr.parents('div.layui-layer-page').find('.layui-layer-close').trigger('click');
        });
    });
</script>

<!-- 操作工具条模板 -->
<script type="text/html" id="SelectToolbar">
    <a class="layui-btn layui-btn-sm" lay-event="select">选 择</a>
</script>

<!-- 数据状态切换模板 -->
<script type="text/html" id="StatusSwitchProblemDataTpl">
    {{-d.status ? '<b class="color-green">已激活</b>' : '<b class="color-red">已隐藏</b>'}}
</script>

{/block}